<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
   
	
	<link rel="stylesheet" type="text/css" href="/common/css/hot_page/hotClassify.css" />
	<link rel="stylesheet" type="text/css" href="/common/css/detail_page/detail.css" />
	<link rel="stylesheet" type="text/css" href="/common/zui/css/zui.css" />
	<script type="text/javascript" src="/common/js/jQuery-3.3.1.js"></script>
	<script type="text/javascript" src="/common/zui/js/zui.min.js"></script>
	
<title>热门界面</title>
</head>
	<style type="text/css">
		#head {
		   width: 100%;
	       position: fixed;
			height: 55px;
			/*background-color: pink !important;*/
			margin: 0;
			padding: 0;
			margin: auto;
			z-index: 999;
		}
		
		.middle-box {
			width: 1000px;
			margin-left: 0px;
			margin-right: 0px;
			font-size: 14px;
			margin-top:40px;
		}
		
		.left-li {
			background-color: white;
			padding-right: 0px;
			padding-left: 0px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer
		}
		
		.right-li {
			/*background-color: wheat;*/
			width: 830px;
			height: 800px;
		}
		
		.ico_block {
			float: left;
			font-size: 24px;
			width: 26px;
			text-align: center;
			margin: 0px 10px 0 35px;
		}
		
		.list-group-item {
			background-color: #A5AFCB;
			color: white;
			font-size: 16px;
			border: none;
			padding: 15px 1px;
		}
		
		.list-group {
			margin-bottom: 0px;
		}
		 
		.list-group-item:first-child {
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
		}
		.list-group-item:last-child {

    margin-bottom: 0;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;

     } 
     .col-md-2 {
    width: 14%;
}
	.active1 {
			background: rgba(0, 0, 0, 0.2);
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			
			$(".right-li").load("/hotPage/hotChild");
			$(".left-li li").hover(function(){
				$(".left-li li").removeClass("active1");
				$(this).addClass("active1");

			});
			$(".before-li").on("click",function(){
				$(".right-li").load("/hotPage/hotChild?typeid="+$(this).attr("typeid"));

			
			});
			//点击load文章界面
			$(".behind-li").on("click",function(){
				$(".right-li").load("/hotPage/pageChild?typename="+$(this).attr("typename"));
				//$.post("/hotClassify/child",
					//	function(data){
					//	$(".right-li").load("/hotPage/pageChild?typeid="+$(this).attr("typeid"));	
					//	})
			
			});
		})
	</script>
<body>
	<div id="head">
	 <iframe src="/hotClassify/top"  style="width: 100%; border: none; height: 55px;"></iframe>
		</div>
	
	
		<!--中间大盒子-->
		<div class="WB_container">
			<!--分类盒子-->
			<div class="row middle-box">
				<div class="col-md-2 left-li" style="position: fixed; width: 150px;">
					<ul class="list-group">
						<li class="list-group-item before-li" typeid="1">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/hot-icon.png" style="width: 25px; height: 35px;padding-bottom: 15px;padding-top: 0px;"/>
			  	</span> 热门
						</li>
						<li class="list-group-item before-li" typeid="7">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/dot.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;"/>
			  	</span> 明星
						</li>
						<li class="list-group-item before-li" typeid="4">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/dot.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 搞笑
						</li>
						<li class="list-group-item before-li" typeid="5">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/dot.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 社会
						</li>
						<li class="list-group-item behind-li" typename="热门">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/headlines-icon.png" style="width: 20px; height: 30px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 头条
						</li>
						<li class="list-group-item behind-li" typename="美女">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/dot.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 美女
						</li>
						<li class="list-group-item behind-li" typename="体育">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/dot.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 体育
						</li>
						<li class="list-group-item behind-li" typename="热门">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/dot.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 时尚
						</li>
						<li class="list-group-item">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/cup.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 榜单
						</li>
						<li class="list-group-item">
							<span class="ico_block">
			  		<img src="/common/img/xiuli/more.png" style="width: 25px; height: 35px;padding-bottom: 10px;padding-top: 0px;""/>
			  	</span> 更多
						</li>
					</ul>
				</div>
				<div class="col-md-10" style="padding-right: 0px; padding-left: 5px; margin-left: 15%;">
				 <div class="right-li">
				 	右边盒子
				 </div>
			
				</div>
			</div>

		</div>
</body>
</html>